<template>
  <van-cell
    :label="label"
    labelClass="article-cell__stats"
    class="article-cell"
    :class="className"
    clickable
    @click="onView"
  >
    <template slot="title">
      <slot name="title">
        <span class="article-cell__title ellipsis-2">{{data.title}}</span>
      </slot>
    </template>

    <slot name="thumb">
      <div
        class="article-cell__thumb"
        v-if="thumb"
      >
        <img :src="thumb" />
        <div
          class="babel-tips"
          v-if="babelTips"
        >{{babelTips}}</div>
      </div>
    </slot>

    <slot
      name="stats"
      v-if="!label"
    >
      <div class="article-cell__stats">{{stats}}</div>
    </slot>
  </van-cell>

</template>
<script>
import { Icon, Cell, Button } from 'vant'
export default {
  components: {
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [Button.name]: Button
  },
  name: 'article-cell',
  props: {
    data: Object,
    tpl: String
  },
  data () {
    return {
      active: false,
      nativeLinkType: 'article'
    }
  },
  computed: {
    format () {
      if (this.tpl) {
        return this.tpl
      }
      return this.data.format
    },
    className () {
      return 'article-cell__' + this.format
    },
    stats () {
      let stats = []
      if (this.data.stats) {
        if (this.data.stats.comments) {
          stats.push('评论' + this.data.stats.comments)
        } else {
          stats.push('浏览' + this.data.stats.views)
        }
      }
      stats.push(this.data.publishTime)
      return stats.join(' | ')
    },
    label () {
      if (this.format === 'default') {
        return this.stats
      }
      return ''
    },
    babelTips () {
      if (this.data.format === 'gallery' && this.data.picture_nums > 0) {
        return this.data.picture_nums + '图'
      } else if (this.data.format === 'video' && this.data.duration) {
        return this.data.duration
      }
      return false
    },
    thumb () {
      let albums = this.data.pictures
      if (albums.length > 0 && albums.length < 3) {
        return albums.shift()
      }
      return false
    },
    link () {
      console.log('nativeLinkType', this.nativeLinkType)
      return {
        type: this.nativeLinkType,
        format: this.data.format,
        id: this.data.id
      }
    }
  },
  methods: {
    onView () {
      console.log(this.data.weblink)
      this.pushNativelink(this.data.weblink)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.article-cell {
  &__title {
    line-height: 24px;
  }
  &__stats {
    font-size: 10px;
    margin-top: 10px;
    line-height: initial;
    font-weight: 300;
  }
  &__thumb {
    position: relative;
    width: 100%;
    &:before,
    &:after {
      display: table;
      content: "";
    }
    &:after {
      clear: both;
    }
    > img {
      float: right;
      width: 100%;
    }
    .babel-tips {
      position: absolute;
      right: 5%;
      bottom: 5%;
    }
  }
  &__default {
    .van-cell__title /deep/ {
      flex: 2.5;
      position: relative;
      padding-bottom: 24px;
      .van-cell__label {
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    .van-cell__value {
      align-self: center;
      padding-left: 10px;
      img {
        float: none;
        height: auto;
        width: 100%;
      }
    }
    .article-cell__thumb {
      &:before,
      &:after {
        display: none;
      }
      display: flex;
      align-items: center;
      justify-content: center;
      justify-items: center;
      align-content: center;
      overflow: hidden;
      height: 72px;
    }
  }
  &__gallery,
  &__video {
    flex-flow: row wrap;
    .van-cell__title /deep/ {
      padding-bottom: 10px;
    }
    .van-cell__value /deep/ {
      flex: none;
      width: 100%;
      text-align: left;
    }
  }
  &__gallery {
    &-pics {
      width: 100%;
      display: flex;
      justify-content: space-between;
      > div {
        background: dodgerblue;
        flex-basis: 33%;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  &__video {
    .article-cell__thumb::before {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      content: "";
      display: block;
      background-image: url(../../assets/icons/play.png);
      background-size: 15%;
      background-color: rgba(0, 0, 0, 0.2);
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
}
</style>
